﻿<template>
  <a-modal centered :width="640" :title="modifyEntity.title" :visible="modifyEntity.showModify" @cancel="handleRefresh">
    <!--保存按钮-->
    <template slot="footer">
      <a-row>
        <a-col :span="8">
          <a-tag color="blue">操作完是否继续？</a-tag>
          <a-switch v-model="hasClose" :loading="loading">
            <a-icon slot="checkedChildren" type="check" />
            <a-icon slot="unCheckedChildren" type="close" />
          </a-switch>
        </a-col>
        <a-col :span="16">
          <a-button icon="close-circle" @click="handleRefresh">取消</a-button>
          <a-divider type="vertical" />
          <a-button icon="reload" @click="handleReset" :loading="loading">重置</a-button>
          <a-divider type="vertical" />
          <a-button icon="check-circle" :loading="loading" @click="handleSubmit">保存</a-button>
        </a-col>
      </a-row>
    </template>

    <a-spin :spinning="spinning">
      <a-form :form='form' :labelCol='labelCol' :wrapperCol='wrapperCol'>
        <a-row>
          <a-col :lg="24" :md="24" :sm="24">
            <a-form-item label='站点名称'>
              <a-input v-decorator="['name', { rules: [{ required: true, message: '请输入站点名称' }] }]" placeholder='请输入站点名称' />
            </a-form-item>
          </a-col>

          <a-col :lg="24" :md="24" :sm="24">
            <a-form-item label='站点域名'>
              <a-input v-decorator="['realmName', { rules: [{ required: true, message: '请输入站点域名' }] }]" placeholder='请输入站点域名' />
            </a-form-item>
          </a-col>
          <a-col :lg="24" :md="24" :sm="24">
            <a-form-item label='状态'>
              <a-switch v-decorator="['status', { valuePropName: 'checked', initialValue: false }]" un-checked-children='否' checked-children='是' />
            </a-form-item>
          </a-col>
          <a-col :lg="24" :md="24" :sm="24">
            <a-form-item label='描述'>
              <a-textarea v-decorator="['description']" placeholder='请输入描述' :rows='4' />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>

import { getTenants, addTenants, updateTenants } from './tenants'
export default {
  props: {
    modifyEntity: {
      type: Object,
      required: true,
      default: function () {
        return {
          // 传递的主键
          id: "",
          // 页面操作类型
          operation: this.operationFlag.Add,
          // 是否展示编辑页面
          showModify: false,
          // 标题
          title: '',
        };
      },
    },
  },
  data() {
    return {
      // 显示描述宽度
      labelCol: { md: { span: 4 }, xs: { span: 24 }, sm: { span: 12 } },
      // 输入框宽度
      wrapperCol: { md: { span: 18 }, xs: { span: 24 }, sm: { span: 12 } },
      // 执行保存后是否关闭当前页面
      hasClose: false,
      // 遮罩层加载
      spinning: false,
      // 按钮加载状态
      loading: false,
      // 是否只读
      readonly: false,
      form: this.$form.createForm(this),
      // formFields: {},
      entity: {},
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    //#region 加载数据

    loadData() {
      this.form.resetFields() // 重置参数值
      //修改，详情获取详细信息
      if (this.modifyEntity.operation !== this.operationFlag.Add) {
        this.spinning = true;
        // 编辑状态是只读
        this.readonly = true;
        // this.formFields = this.form.getFieldsValue()
        let that = this
        getTenants(this.modifyEntity.id).then((res) => {
          if (res.code != 200) {
            this.$notification.warning({ description: "数据不存在" });
            this.$emit("handleRefresh");
            return false;
          }
          that.entity = res.data
          var setData = {};
          Object.keys(that.form.getFieldsValue()).forEach((item) => {
            setData[item] = that.entity[item];
          });
          that.form.setFieldsValue(setData);
          that.spinning = false;
        })
          .catch((error) => {
            that.spinning = false;
          });
      }
    },
    //#endregion

    //#region 保存
    // 保存
    handleSubmit() {
      let that = this
      this.spinning = true
      this.form.validateFields((errors, values) => {
        if (!errors) {
          if (that.modifyEntity.operation === that.operationFlag.Add) {
            addTenants(values).then((res) => {
              that.submitResult(res)
            })
              .catch((error) => {
                that.spinning = false;
              });
          } else {
            that.entity = Object.assign(that.entity, that.form.getFieldsValue())
            updateTenants(that.entity).then((res) => {
              that.submitResult(res)
            })
              .catch((error) => {
                that.spinning = false;
              });
          }
        } else {
          this.spinning = false
        }
      })
    },
    // 保存结果
    submitResult(res) {
      if (res.code == 200) {
        this.$notification.success({ description: res.msg })
        if (!this.hasClose) {
          this.$emit('handleRefresh')
        }
      } else {
        this.$notification.error({ description: res.msg })
      }
      this.spinning = false
    },
    //#endregion

    //#region  取消、关闭、重置
    // 取消、关闭
    handleRefresh() {
      this.spinning = false
      this.$emit('handleRefresh')
    },
    // 重置
    handleReset() {
      this.loadData()
    },
    //#endregion
  },
}
</script>
